<template>
  <div class="main01">
    <basic-layout title="体检套餐详情" backBtnType="arrow" :showAddBtn="false" class="wrapBox">

      <div class="body_box">
        <div class="main">

          <div style=" font-weight: bold;margin: 5px 10px;">体检套餐详情</div>
          <div>
            <div class="fContentMain firstClass">
              <div class="contentC">
<!--                <div class="box-title">体检机构</div>-->
                <div>
                  <div class="title">
                    <div>年份</div>
                    <div>{{detailDate.year}}</div>
                  </div>
                  <div class="title">
                    <div>机构名称</div>
                    <div v-if="detailDate.rvHealthOrganizations">{{detailDate.rvHealthOrganizations.name}}</div>
                  </div>
                  <div class="title">
                    <div>套餐名称</div>
                    <div>{{detailDate.name}}</div>
                  </div>
                  <div class="title">
                    <div>套餐价格</div>
                    <div>{{detailDate.price}}</div>
                  </div>
                  <div class="title">
                    <div>适用人群</div>
                    <div v-if="detailDate.rvHealthPopulation">{{detailDate.rvHealthPopulation.name}}</div>
                  </div>
                  <div class="title">
                    <div>年龄分布</div>
                    <div v-if="detailDate.rvHealthYear">{{detailDate.rvHealthYear.name}}</div>
                  </div>
                  <div class="title">
                    <div>备注</div>
                    <div>{{detailDate.remark}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div style=" font-weight: bold;margin: 5px 10px;">体检套餐明细</div>

          <div class="fContentMain secondClass">
            <div class="contentA">
              <div class="title" style="color: #878888;">
                <div >项目类别</div>
                <div style=" text-align: center;">项目名称</div>
              </div>
              <div  v-for="(comboDetail,index) in comboDetailList" :key="index" style="width: 100%">
<!--                这是水平分割线-->
                <div class="divider"></div>
                <div class="title" >
                  <div >{{comboDetail.type}}</div>
                  <div >{{comboDetail.name}}</div>
                </div>

              </div>

            </div>
          </div>



<!--          旧的-->
<!--          <div class="fContentMain secondClass" v-for="(comboDetail,index) in comboDetailList" :key="index">-->
<!--            <div class="contentB">-->
<!--              <div class="title" >-->
<!--                <div>项目类别</div>-->
<!--                <div>{{comboDetail.type}}</div>-->
<!--              </div>-->
<!--              <div class="divider"></div>-->
<!--              <div class="title" >-->
<!--                <div>项目名称</div>-->
<!--                <div>{{comboDetail.name}}</div>-->
<!--              </div>-->
<!--&lt;!&ndash;              <div class="title" >&ndash;&gt;-->
<!--&lt;!&ndash;                <div>临床意义</div>&ndash;&gt;-->
<!--&lt;!&ndash;                <div>{{comboDetail.detail}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </div>-->

        </div>

      </div>
    </basic-layout>

    <full-loading v-if="loading"></full-loading>
  </div>
</template>
<script>
import { getById } from "@/api/realAssets/rvhealth/combo";
import { getByComboId } from "@/api/realAssets/rvhealth/comboDetail";

export default {
  name: 'applyComboDetail',
  props: {},
  components: {},
  data() {
    return {

      loading: false,

      //体检套餐信息
      detailDate: {},

      //体检套餐明细
      comboDetailList: [],

    }
  },

  created() {
    // 体检套餐表格数据
    this.getCombo();
    //根据comboId获得体检套餐详情信息
    this.getComboDetail();
  },
  computed: {},

  methods: {

    // 体检套餐表格数据
    getCombo() {
      this.loading = true;
      //根据id获得体检套餐信息
      getById({id: this.$route.query.id}).then(response => {
        this.detailDate = response.data.data;
        this.loading = false;
      });
    },

    //根据comboId获得体检套餐详情信息
    getComboDetail(){
      //根据comboId获得体检套餐详情信息
      getByComboId({comboId: this.$route.query.id}).then(response => {
        this.comboDetailList = response.data.data;
      });
    },

    calcMargin(index) {
      if (index == 0) {
        return '10px 0px';
      } else {
        return '0px 0px 10px 0px';
      }
    },

  },
}
</script>
<style lang="less" scoped>

.my-swipe {
  height: 160px;

  .van-swipe-item {
    background-color: #b8bab4;
    text-align: center;

    .swiper-img {
      width: 100%;
      height: 160px;
    }
  }
}

.apply-des {
  width: 300px;
  padding: 5px;

  .title {
    text-align: center;
    font-size: 16px;
    line-height: 40px;
  }

  .des {
    border: 1px solid #f2f2f2;
  }
}

.body_box {
  background-color: #f9f9f9;
  padding: 10px 0;


  .fContentMain {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgb(254, 255, 255);
    color: rgb(51, 51, 51);
    border: 0.1px solid rgb(220, 223, 230);
    border-radius: 6px;
    margin: 10px;
    padding: 10px;

    .contentC {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      position: relative; /* 设置相对定位，以便在伪元素中使用绝对定位 */

      .box-title {
        font-weight: bold;
        margin: 5px 10px;
      }

      .divider {
        width: calc(100% - 20px); /* 减去左右 margin */
        height: 1px;
        background-color: #e0e0e0;
        margin: 5px 10px; /* 与 .title 对齐 */
        position: relative;
      }

      .title {
        display: flex;
        width: 100%;
        margin: 5px 10px;


        div:first-child {
          width: 100px;
          color: #878888;
        }

        div:last-child {
          width: calc(100% - 100px);
          //font-weight: 500;
        }

      }

    }

    .contentA {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      position: relative; /* 设置相对定位，以便在伪元素中使用绝对定位 */

      .box-title {
        font-weight: bold;
        margin: 5px 10px;
      }

      .divider {
        width: calc(100% - 20px); /* 减去左右 margin */
        height: 1px;
        background-color: #e0e0e0;
        margin: 5px 10px; /* 与 .title 对齐 */
        position: relative;
      }

      .title {
        display: flex;
        width: 100%;
        margin: 5px 5px;


        div:first-child {
          display: flex;
          align-items: center; /* 垂直居中 */
          //justify-content: center; /* 水平居中 */

          width: 100px;
          //color: #878888;
          margin-right: 20px;
        }

        div:last-child {
          align-items: center; /* 垂直居中 */
          width: calc(100% - 120px);
          //font-weight: 500;
        }

      }
    }

     //这是垂直分割线
    .contentA::before {
      content: "";
      position: absolute;
      left: 110px; /* 对齐左侧标题的宽度 */
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: #e0e0e0;
    }

    .contentB {
      display: flex;
      align-items: flex-start;
      background: rgb(255, 255, 255);
      color: rgb(51, 51, 51);
      height: 100%;
      width: 100%;
      flex-direction: column;
      justify-content: space-between;
      position: relative; /* 设置相对定位，以便在伪元素中使用绝对定位 */

      .box-title {
        font-weight: bold;
        margin: 5px 10px;
      }

      .divider {
        width: calc(100% - 20px); /* 减去左右 margin */
        height: 1px;
        background-color: #e0e0e0;
        margin: 5px 10px; /* 与 .title 对齐 */
        position: relative;
      }

      .title {
        display: flex;
        width: 100%;
        margin: 5px 10px;


        div:first-child {
          width: 100px;
          color: #878888;
        }

        div:last-child {
          width: calc(100% - 100px);
          //font-weight: 500;
        }

      }
    }

    .contentB::before {
      content: "";
      position: absolute;
      left: 100px; /* 对齐左侧标题的宽度 */
      top: 0;
      bottom: 0;
      width: 1px;
      background-color: #e0e0e0;
    }

  }

  .firstClass {
    min-height: 120px !important;
  }

  .firstClass_02 {
    min-height: 60px !important;
  }

  .secondClass {
    min-height: 60px !important;
  }


  .head {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    padding: 10px 0px;
    background-color: rgb(254, 255, 255);
    flex-direction: column;

    .picStyle {
      background-image: url('../../../../assets/images/shz.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleNoPass {
      background-image: url('../../../../assets/images/prohibit.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStyleWait {
      background-image: url('../../../../assets/images/allocate.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .picStylePass {
      background-image: url('../../../../assets/images/complete.png');
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 50px;
      width: 50px;
    }

    .f {
      font-size: 20px;
      font-weight: 600;
    }

    .ff {
      font-size: 10px;
      font-weight: 600;
    }
  }
}</style>
